import { View, Image, Text } from '@tarojs/components'
import { navigateTo } from '@tarojs/taro'
import './index.scss'

interface CategoryItemProps {
  id: string | number
  icon: string
  name: string
  url?: string
  onClick?: (id: string | number) => void
}

/**
 * 分类项组件
 */
const CategoryItem: React.FC<CategoryItemProps> = ({
  id,
  icon,
  name,
  url,
  onClick
}) => {
  // 处理点击事件
  const handleClick = () => {
    if (onClick) {
      onClick(id)
      return
    }
    
    // 默认跳转行为
    if (url) {
      navigateTo({
        url: url.startsWith('/') ? url : `/${url}`
      })
    }
  }
  
  return (
    <View className='category-item' onClick={handleClick}>
      <View className='category-item__icon-wrapper'>
        <Image
          className='category-item__icon'
          src={icon}
          mode='aspectFill'
        />
      </View>
      <Text className='category-item__name'>{name}</Text>
    </View>
  )
}

export default CategoryItem 